<template>
  <view class="achievement-container">

    <!-- 成就列表 -->
    <scroll-view class="achievement-list" scroll-y>
      <view 
        class="achievement-item" 
        v-for="(item, index) in achievementList" 
        :key="index"
        :class="{ 'locked': !item.unlocked, 'unlocked': item.unlocked }"
      >
        <image 
          :src="item.unlocked ? item.icon : '../../static/icons/dice.png'" 
          class="achievement-icon" 
          :class="{ 'animate__animated animate__bounceIn': item.unlocked && !item.animationPlayed, 'locked-icon': !item.unlocked }"
          @animationend="item.animationPlayed = true"
        />
        <view class="achievement-info">
          <text class="achievement-name">{{ item.name }}</text>
          <text class="achievement-desc">{{ item.description }}</text>
          <progress 
            v-if="item.progress" 
            :value="item.progress.current" 
            :max="item.progress.total" 
            class="progress-bar"
          />
          <text v-if="item.progress" class="progress-text">
            {{ item.progress.current }}/{{ item.progress.total }}
          </text>
          <text v-if="item.unlocked" class="unlocked-text">已解锁</text>
        </view>
      </view>
    </scroll-view>

    <!-- 解锁动画 -->
    <view class="unlock-animation" v-if="showUnlockAnimation">
      <image src="../../static/icons/confetti.png" class="confetti" />
      <text class="unlock-message">成就解锁!</text>
    </view>
  </view>
</template>

<script>
import { getAchievements } from '../../utils/achievements.js';
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';

export default {
  components: {
    uniIcons
  },
  data() {
    return {
      achievementList: [],
      showUnlockAnimation: false,
      unlockMessage: ''
    };
  },
  onLoad() {
    this.loadAchievements();
    
    // 监听成就解锁事件
    uni.$on('achievement-unlocked', (achievement) => {
      this.showUnlockAnimation = true;
      this.unlockMessage = `${achievement.name}已解锁!`;
      
      setTimeout(() => {
        this.showUnlockAnimation = false;
        this.loadAchievements();
      }, 2000);
    });
  },
  onUnload() {
    uni.$off('achievement-unlocked');
  },
  methods: {
    loadAchievements() {
      const achievements = getAchievements();
      this.achievementList = achievements.map(a => ({
        ...a,
        animationPlayed: a.unlocked
      }));
    },
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style>
.achievement-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background-color: #4CAF50;
  color: white;
  padding: 0 15px;
}

.back-btn {
  position: absolute;
  left: 15px;
  width: 24px;
  height: 24px;
}

.back-icon {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.achievement-list {
  flex: 1;
  padding: 15px;
}

.achievement-item {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.achievement-item.locked {
  opacity: 0.6;
}

.locked-icon {
  opacity: 0.5;
  filter: grayscale(100%);
}

.achievement-item.unlocked {
  background-color: #f0fff0;
  border-left: 4px solid #4CAF50;
}

.achievement-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}

.achievement-info {
  flex: 1;
}

.achievement-name {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.achievement-desc {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #e0e0e0;
  margin-bottom: 4px;
}

.progress-bar::-webkit-progress-value {
  background-color: #4CAF50;
  border-radius: 3px;
}

.progress-text {
  font-size: 12px;
  color: #999;
}

.unlocked-text {
  display: block;
  font-size: 12px;
  color: #4CAF50;
  font-weight: bold;
  margin-top: 4px;
}

.unlock-animation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.7);
  z-index: 999;
}

.confetti {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
  animation: confetti-fall 2s ease-in-out;
}

.unlock-message {
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

@keyframes confetti-fall {
  0% { transform: translateY(-100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
</style>